import React, {Component} from 'react';
import MyAddress from './my-address';


class MyPlan extends Component {
    state = {
        selectAddress: false,
        filterLayerStatus: false,
        filterData: [],
        tabData: []

    }

    componentDidMount() {

        this.setState({
            filterData: ['全部', '眼睛干涩', '手脚冰凉', '口臭', '低脂', '蛋白质', '内分泌'].map((item, index) => ({
                label: item,
                checked: index === 0
            })),
            tabData: ['主食(1/3)', '荤食(1/3)', '蔬菜(1/3)', '水果(1/3)', '饮品(1/3)', '甜点(1/3)'].map((item, index) => ({
                label: item,
                checked: index === 0
            })),
        })

    }

    clickHandler = (type, param, e) => {
        if (!type) return;
        switch (type) {
            case 'filter': {
                this.setState({
                    filterLayerStatus: !this.state.filterLayerStatus
                })
                break;
            }
            case 'filterItem': {
                const {filterData} = this.state;

                this.setState({
                    filterData: filterData.map(item => {
                        if (item.label === param.label) {
                            item.checked = !item.checked
                        }
                        return item;
                    })
                })
            }
            case "tabItem": {
                const {tabData} = this.state;

                this.setState({
                    tabData: tabData.map(item => {
                        item.checked = false;
                        if (item.label === param.label) {
                            item.checked = true
                        }
                        return item;
                    })
                })
                break;

            }
            case "selectAddress": {
                this.setState({
                    selectAddress: true
                })
                break;
            }
            case "selectAddressBack": {
                this.setState({
                    selectAddress: false
                })
                break;

            }
        }
    }

    renderFilter = () => {
        const {filterData} = this.state;
        return filterData.map(item => (
            <li
                key={item.label}
                className={item.checked ? "active" : ""}
                onClick={this.clickHandler.bind(null, 'filterItem', item)}
            >{item.label}</li>))

    }
    renderTab = () => {
        const {tabData} = this.state;
        return tabData.map(item => (
            <li
                key={item.label}
                className={item.checked ? "active" : ""}
                onClick={this.clickHandler.bind(null, 'tabItem', item)}
            >{item.label}</li>))

    }

    render() {
        const {selectAddress, filterLayerStatus} = this.state;

        if (selectAddress) {
            return (<MyAddress clickHandlerBack={this.clickHandler}/>)
        }

        return (
            <div className="my-plan">
                <div className="fixed-top">
                    <a className="btn-back" href="javascript:history.back()"><i
                        className="icon anticon">&#xe620;</i></a>
                    <span className="name">我的营养计划</span>
                </div>
                <div className="position">
                    <a
                        onClick={this.clickHandler.bind('null', 'selectAddress')}

                    >
                        <i className="icon anticon">&#xe685;</i>
                        建国门外交公寓
                        <i className="icon anticon" style={{color: '#ccc'}}>&#xe61f;</i>
                    </a>
                    <p>温馨提示：目前仅支持北京回龙观地区配送</p>
                </div>
                <div className="pipi-rmd">
                    <h3 className="title">
                        <span>PiPi推荐</span>
                    </h3>
                    <p>一键定制，只能匹配</p>
                    <a href=""><img src={require("../images/home-04.jpg")} width="100%" alt=""/></a>
                </div>
                <div className="self-ctrl">
                    <h3 className="title">
                        <span>手动定制</span>
                    </h3>
                    <p>种类越丰富，营养越均衡</p>
                    <div className="filter">
                        <span
                            className={"btn " + (filterLayerStatus ? "active" : "")}
                            onClick={this.clickHandler.bind(null, 'filter')}
                        >
                            筛选 <i
                            className="icon anticon">&#xe663;</i>
                        </span>
                        <ul className={"hide " + (filterLayerStatus ? "active" : "")}>
                            {this.renderFilter()}
                            {/*<li className="active">全部</li>*/}
                            {/*<li>手脚冰凉</li>*/}
                            {/*<li>眼睛干涩</li>*/}
                            {/*<li>口臭</li>*/}
                            {/*<li>低脂</li>*/}
                            {/*<li>蛋白质</li>*/}
                            {/*<li>内分泌</li>*/}
                        </ul>
                    </div>
                    <div className="tab-list">
                        <div className="tab">
                            <ul>
                                {this.renderTab()}
                                {/*<li className="active">主食(1/3)</li>*/}
                                {/*<li>荤食(1/3)</li>*/}
                                {/*<li>蔬菜(1/3)</li>*/}
                                {/*<li>水果(1/3)</li>*/}
                                {/*<li>甜点(1/3)</li>*/}
                                {/*<li>饮品(1/3)</li>*/}
                            </ul>
                        </div>
                        <div className="content">
                            <ul>
                                <li>
                                    <img src={require('../images/today-rmd-01.jpg')} alt=""/>
                                    <div>
                                        <h4>玉米</h4>
                                        <p><span className="tag">降血压</span></p>
                                        <p>富含膳食纤维，能有效降低血压</p>
                                        <p className="price"><span>￥ 7.9 </span><span>/500g</span></p>
                                        <i className="icon anticon btn-card">&#xe668;</i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div className="fixed-cart">
                    <i className="num">7</i>
                    <i className="icon anticon">&#xe668;</i>
                </div>
            </div>
        )
    }
}

export default MyPlan;